<template>
  <view>
    <view class="u-p-24">

      <view class="address-wrap">
        <view class="top">
          <my-btn :size="[324, 80, 34]" color="#fff" bg="red" round inline>物流配送</my-btn>
        </view>

        <view class="address" @click="chooseAddressModal = true">
          <view class="flex-col" style="width: 580rpx;">
            <view class="text-cut u-font-32 u-p-b-8">
              <text>王虎</text>
              <text class="u-m-l-24">18677523361</text>
            </view>
            <view class="text-cut2 u-font-28" style="color: #ACACAC;">
              金水区 商务内环九如路海逸名门23号一单元801
            </view>
          </view>

          <u-icon name="arrow-right" color="#ACACAC" size="40"></u-icon>
        </view>
      </view>

      <view class="order-info">
        <view class="u-font-32 u-p-b-24 text-cut">仟吉KenGee(宝龙店)</view>

        <view class="good flex-col">
          <view class="flex-row justify-between">
            <u-avatar src="https://picsum.photos/id/310/200/200" mode="square"></u-avatar>

            <view class="info" style="width: 540rpx;">
              <view class="flex-row justify-between u-font-28 u-p-t-8 u-p-b-8">
                <view>法式香片</view>
                <view>¥9.9</view>
              </view>

              <view style="color: #999999;">×1</view>
            </view>
          </view>

          <view class="count flex-row justify-between align-center">
            <view>数量</view>
            <u-number-box v-model="val" @change="valChange"></u-number-box>
          </view>
        </view>

        <view class="row">
          <view>快递费</view>
          <view class="black">¥12</view>
        </view>
        <view class="row">
          <view>商家优惠</view>
          <view class="red">-¥30</view>
        </view>
        <view class="row">
          <view>优惠券</view>
          <view class="red">
            <text>-¥30</text>
            <u-icon name="arrow-right" color="#ACACAC" size="24"></u-icon>
          </view>
        </view>
        <view class="row">
          <view>积分</view>
          <view class="yellow">抵扣¥3.6</view>
        </view>

        <view class="row u-m-t-8">
          <view></view>
          <view>
            <text class="black">小计:</text>
            <text class="red u-font-32">￥15.8</text>
          </view>
        </view>
      </view>

      <view class="u-p-24">
        <view class="beizhu" @click="beizhuModal = true">
          <view>备注</view>
          <view class="red">
            <text style="color: #ACACAC;">未填写</text>
            <u-icon name="arrow-right" color="#ACACAC" size="24"></u-icon>
          </view>
        </view>
      </view>

      <view class="flex-row justify-between pay-btns">
        <view class="left">
          <view>优惠:21元</view>
          <view>合计:<text class="lg">￥138</text></view>
        </view>
        <view class="right">提交订单</view>
      </view>
    </view>
    
    
    <!-- 收货地址 -->
    <u-popup v-model="chooseAddressModal" mode="center" border-radius="24">
      <view class="pop-container">
        <view class="u-font-32 text-bold f-center u-p-24">选择收货地址</view>
        <view class="u-p-16"><view style="height: 2rpx;background: #F0F0F0;"></view></view>
        
        <view class="pop-list">
          <view class="address on">
            <view class="flex-row align-center u-font-30 u-p-8">
              <view class="u-m-r-16">张飞</view>
              <view>15673285462</view>
            </view>
            
            <view class="flex-row u-font-26">
              <image src="../../static/icons/weizhi-white.png" class="icon"></image>
              <view class="gray">河南省郑州市金水区国基路花园路世纪佳园2号楼</view>
            </view>
          </view>
          
          <view class="address">
            <view class="flex-row align-center u-font-30 u-p-8">
              <view class="u-m-r-16">张飞</view>
              <view>15673285462</view>
            </view>
            
            <view class="flex-row u-font-26">
              <image src="../../static/icons/weizhi.png" class="icon"></image>
              <view class="gray">河南省郑州市金水区国基路花园路世纪佳园2号楼</view>
            </view>
          </view>
        </view>
        
        <my-btn :size="[300, 80, 32]" color="#F6AD3C">+添加收货地址</my-btn>
        <u-gap height="24"></u-gap>
      </view>
    </u-popup>
    
    <!-- 备注 -->
    <u-popup v-model="beizhuModal" mode="center" border-radius="24">
      <view class="pop-wrap">
        <view class="pop-title">备注</view>
        <u-input v-model="beizhu" type="textarea" border />
    
        <view class="pop-btn u-m-t-24">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        val: 1,
        beizhu: '',
        beizhuModal: false,
        chooseAddressModal: false
      };
    },
    methods: {
      valChange() {

      }
    }
  }
</script>

<style lang="scss">
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8rpx 0;
    font-size: 28rpx;
    color: #A7A7A7;

    .black {
      color: #000000;
    }

    .yellow {
      color: #FFA62C;
    }

    .red {
      color: #FF4500;
    }
  }

  .address-wrap {
    width: 702rpx;
    height: 222rpx;
    background: #f0f0f0;
    position: relative;
    margin-top: 64rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .address {
      width: 640rpx;
      height: 160rpx;
      margin-top: 8rpx;
      // background: red;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .top {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(0, -56rpx);
      padding: 0 24rpx;
      display: flex;
      align-items: center;
    }
  }

  .order-info {
    background: #fff;
    border-radius: 24rpx;
    margin: 24rpx 0 64rpx 0;
    padding: 24rpx;

    .good {
      margin: 8rpx 0;

      .count {
        padding: 16rpx 0;
      }
    }
  }

  .pay-btns {
    padding: 24rpx 8rpx;
    letter-spacing: 1px;

    .left {
      width: 476rpx;
      height: 80rpx;
      background: #3F3F3F;
      box-shadow: 1rpx 4rpx 7rpx 1rpx rgba(85, 68, 63, 0.2);
      border-radius: 40rpx 0rpx 0rpx 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      color: #fff;
      padding: 0 32rpx;

      .lg {
        font-size: 28rpx;
      }
    }

    .right {
      width: 196rpx;
      height: 80rpx;
      background: linear-gradient(90deg, #FFA82B 0%, #FF8F34 99%);
      box-shadow: 1rpx 4rpx 7rpx 1rpx rgba(85, 68, 63, 0.2);
      border-radius: 0rpx 40rpx 40rpx 0rpx;
      font-size: 30rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  .beizhu {
    width: 100%;
    background: #f0f0f0;
    border-radius: 12rpx;
    padding: 16rpx;
    display: flex;
    justify-content: space-between;
  }
  
  .pop-list {
    .address {
      background: #fff;
      color: #000;
      padding: 32rpx;
      --gray: #C3C3C3;
      
      .gray {
        color: var(--gray);
      }
      
      &.on {
        background: #ffb94b;
        color: #fff;
        --gray: #fff;
      }
    }
    
    .icon {
      width: 56rpx;
      height: 56rpx;
      margin-right: 12rpx;
    }
  }
</style>
